<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <tr>
        <th>名字:</th>
        <td>{{person.name}}</td>
    </tr>
    <tr>
        <th>照片:</th>
        <td><img :src="person.url" style="width: 50px" alt=""></td>
    </tr>
    <tr>
        <th>年龄:</th>
        <td>{{person.age}}</td>
    </tr>
    <tr>
        <th>工作:</th>
        <td>{{person.job}}</td>
    </tr>
    <tr>
        <th>好友:</th>
        <td>
            <ul>
                <li v-for="name in person.friends">{{name}}</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td><input type="button" value="加载数据" @click="f()"></td>
    </tr>
</table>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let v = new Vue({
        el: "table",
        data: {
            person: {}
        },
        methods: {
            f: function () {
                //模拟从服务器请求到的数据
                v.person = {
                    name: "美女",
                    age: 18,
                    url: "e.jpg",
                    job: "模特",
                    friends: ["张学友", "黎明", "赵本山"]
                }
            }
        }
    })
</script>
</body>
</html>